(function(){

    console.log( 'hello , component' );

    const item = {
        // 通过 props 接受由父组件通过 attribute 传递的属性值
        props: [ 'entry' , 'ordinal' ],
        template: `<div class="cart-item">
                       <span>{{ ordinal }}</span>
                       <span>{{ entry.name }}</span>
                       <span>{{ entry.price }}</span>
                       <span>{{ entry.amount }}</span>
                       <span>{{ entry.price * entry.amount }}</span>
                   </div>`
    }

    const total = {
        props: [ 'totalPrice' ],
        template: `<div class="total">
                        <span>{{ totalPrice }}</span>
                   </div>`
    }

    const cart = {
        // 数据
        data(){
            return {
                items: [
                    { id: 12 , name: '藜蒿炒腊肉' , price: 20 , amount: 1 },
                    { id: 10 , name: '荷包辣椒荷包蛋' , price: 18 , amount: 1 },
                    { id: 11 , name: '毛血旺' , price: 16 , amount: 1 },
                    { id: 27 , name: '回锅肉' , price: 20 , amount: 2 }
                ]
            }
        },
        computed: {
            sum(){
                return this.items.reduce( (p,c) => p + c.price * c.amount , 0 );
            }
        },
        // 注册子组件
        components: {
            // 冒号之前是组件名称，也就是将来使用的标签名称
            'cart-item': item,
            'cart-total': total
        },
        // 模板
        template: `<div class="shopping-cart">
                       <!-- 通过 v-bind 为 每一个 cart-item 组件 
                            绑定 entry 和 ordinal 属性值 -->
                       <cart-item v-for="(item,index) in items"
                                  :entry="item"
                                  :ordinal="index+1">
                       </cart-item>
                       <!-- 通过 v-bind 为 total 组件绑定 total-price 属性值 -->
                       <cart-total :total-price="sum"></cart-total>
                   </div>`
    }

    const options = {
        // 注册子组件
        components: {
            'shopping-cart' : cart
        },
        // 模板
        template: `<shopping-cart></shopping-cart>`
    }

    const app = Vue.createApp(options);
    const root = app.mount('#root');
    console.log( root );

})();